vue学习 32路由精讲之二级路由和三级路由

最新推荐文章于 2024-01-15 14:54:53 发布

扫地鼠Gordon

最新推荐文章于 2024-01-15 14:54:53 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签：二级路由和三级路由

本文链接：https://blog.csdn.net/qq_28137309/article/details/89810342

版权

本文深入探讨Vue路由的配置，包括如何设置二级和三级路由。通过在main.js中配置路由，并在路由对象数组中利用`redirect`属性指定默认打开的子级路由。同时，介绍在子级路由中使用`children`属性，其值为包含多个路由对象的数组，以此实现多级路由结构。

摘要由CSDN通过智能技术生成

分级时，默认打开指定下级的路由，使用redirect属性，其值为子级路由的路径path.

子级使用属性children: 值为数组，数组中每个元素都是一个路由对象

二级路由

在main.js中配置路由

// 二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'

在routes中，（routes是由每一个路由对象组成的数组）

{
		path: '/about',
		name: 'aboutLink',
		component: About,
		redirect: '/about/contact',
		children: [{
				path: '/about/contact',
				name: "contactLink",
				component: Contact,
				redirect: '/personname',
				children: [{
						path: '/phone',
						name: "phoneNumber",
						component: Phone
					},
					{
						path: '/personname'